<template>
  <div class="new">
    <el-form ref="form" :rules="formRules" :model="queryData" label-width="80px">
      <el-form-item label="学科" prop="subjectID">
        <el-select v-model="queryData.subjectID" placeholder="请选择" @change="changeFn">
          <el-option v-for="items in subjectList" :key="items.value" :label="items.label" :value="items.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="目录" prop="catalogID">
        <el-select v-model="queryData.catalogID" placeholder="请选择">
          <el-option v-for="items in secondLevelDirectoryList" :key="items.value" :label="items.label" :value="items.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="企业" prop="enterpriseID">
        <el-select v-model="queryData.enterpriseID" placeholder="请选择">
          <el-option v-for="item in enterpriseList" :key="item.id" :label="item.company" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="province" label-width="80px">
        <el-select v-model="queryData.province" value-key="" placeholder="请选择" clearable filterable style="width: 140px">
          <el-option
            v-for="(item,index) in city"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-select v-model="queryData.city" value-key="" placeholder="请选择" clearable filterable style="width: 140px">
          <el-option
            v-for="(item,index) in area"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="direction">
        <el-select v-model="queryData.direction" placeholder="请选择">
          <el-option v-for="item in direction" :key="item.id" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="题型" prop="questionType">
        <el-radio-group v-model="queryData.questionType">
          <el-radio
            label="1"
            @click.native="optionsInit"
          >单选</el-radio>
          <el-radio
            label="2"
            @click.native="optionsInit"
          >多选</el-radio>
          <el-radio
            label="3"
            @click.native="optionsInit"
          >简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
        <el-radio-group v-model="queryData.difficulty">
          <el-radio label="1">简单</el-radio>
          <el-radio label="2">一般</el-radio>
          <el-radio label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题干" prop="question">
        <Quill ref="tg" :context="queryData.question" @update="getQuestion" />
      </el-form-item>
      <!-- 选项 -->
      <!-- 单选 -->
      <el-form-item v-if="Radio" label="选项">
        <el-radio-group v-model="checked">
          <el-radio v-for="item in options" :key="item.code" class="radio" :label="item.code" @change="radioFn">
            {{ String.fromCharCode(item.code) +':' }}
            <el-input v-model="item.title" class="ipt" placeholder="请输入内容" style="width:300px" />
            <el-upload
              class="upimg"
              action="1"
              list-type="picture-card"
            >
              上传图片
            </el-upload>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 单选 END-->
      <!-- 多选 -->
      <el-form-item v-if="checkbox" label="选项">
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in options2" :key="item.code" class="checkbox" :label="item.code" @change="checkBoxFn">
            {{ String.fromCharCode(item.code) +':' }}
            <el-input v-model="item.title" class="ipt" placeholder="请输入内容" style="width:300px" />
            <el-upload
              class="upimg"
              action="1"
              list-type="picture-card"
            >
              上传图片
            </el-upload>
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 多选 END-->
      <!-- 添加选项按钮 -->
      <el-form-item>
        <el-button :disabled="Radio" type="primary" size="default" @click="addCheckedInput">添加选项</el-button>
      </el-form-item>
      <!-- 添加选项按钮 END/-->
      <el-form-item label="解析视频">
        <el-input v-model="queryData.videoURL" style="width:400px" />
      </el-form-item>
      <el-form-item label="答案解析" prop="answer">
        <Quill ref="dajx" :context="queryData.answer" @update="getAnswer" />
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input
          v-model="queryData.remarks"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          style="width:400px;"
          :autosize="{ minRows: 4, maxRows: 8}"
        />
      </el-form-item>
      <el-form-item label="试题标签" prop="tags">
        <el-select v-model="queryData.tags" placeholder="请选择">
          <el-option v-for="items in tagList" :key="items.value" :label="items.label" :value="items.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="btnOk">确认提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import '@/mixins/city'
import Quill from '@/views/questions/new/components/Quill'
import chooseCity from '@/mixins/chooseCity'
import { getSubjects, getSecondLevelDirectory, getEnterprise, getTagList, addArticle, editTitle } from '@/api/questions/new'
import { getChoiceIdData } from '@/api/choice'
export default {
  name: 'New',
  components: {
    Quill
  },
  mixins: [chooseCity],
  data() {
    return {
      options: [
        { code: 65, title: '', img: '', isRight: 0 },
        { code: 66, title: '', img: '', isRight: 0 },
        { code: 67, title: '', img: '', isRight: 0 },
        { code: 68, title: '', img: '', isRight: 0 }
      ], // 选择项
      options2: [
        { code: 65, title: '', img: '', isRight: 0 },
        { code: 66, title: '', img: '', isRight: 0 },
        { code: 67, title: '', img: '', isRight: 0 },
        { code: 68, title: '', img: '', isRight: 0 }
      ], // 选择项
      num: 65,
      checkList: [], // 多选框选择的
      checked: '', // 选中的数据
      Radio: true, // 单选控制
      checkbox: false, // 多选控制
      questionType: '1',
      // 表单数据对象
      queryData: {
        subjectID: '', // 学科名称
        catalogID: '', // 目录
        enterprise: '', // 企业
        province: '', // 省、直辖市
        city: '', // 区
        question: '', // 题干
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        videoURL: '', // 视频
        remarks: '', // 题目备注
        title: '', // 选项内容
        answer: '',
        options: [
          { code: 65, title: '', img: '', isRight: 0 },
          { code: 66, title: '', img: '', isRight: 0 },
          { code: 67, title: '', img: '', isRight: 0 },
          { code: 68, title: '', img: '', isRight: 0 }
        ], // 选择项
        tags: '' // 标签
      },
      // 方向数据
      direction: [
        { id: 1, label: 'o2o' },
        { id: 2, label: '外包服务' },
        { id: 3, label: '企业服务' },
        { id: 4, label: '互联网金融' },
        { id: 5, label: '企业咨询' },
        { id: 6, label: '互联网' },
        { id: 7, label: '电子商务' },
        { id: 8, label: '其他' }
      ],
      // 表单验证规则对象
      formRules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }], // 目录
        enterprise: [{ required: true, message: '请选择企业', trigger: 'blue' }], // 企业
        province: [{ required: true, message: '请选择城市', trigger: 'change' }], // 省、直辖市
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }], // 方向
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }], // 题型
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }], // 难度
        tg: [{ required: true, message: '请填写题干', trigger: 'blue' }], // 题干
        answer: [{ required: true, message: '请填写答案解析', trigger: 'blue' }], // 答案解析
        tags: [{ required: true, message: '请选择标签', trigger: 'change' }] // 标签

      },
      // 学科列表
      subjectList: [],
      // 企业列表
      enterpriseList: [],
      // 二级目录列表
      secondLevelDirectoryList: [],
      // 标签列表
      tagList: []
    }
  },

  watch: {
    // 判断单选多选
    queryData: {
      deep: true,
      handler(val) {
        if (val.questionType === '1') {
          this.Radio = true
          this.checkbox = false
        } else if (val.questionType === '2') {
          this.Radio = false
          this.checkbox = true
        } else {
          this.Radio = false
          this.checkbox = false
        }
      }
    },
    // 有路由传参的时候触发回显数据
    '$route': {
      deep: true,
      immediate: true,
      async handler(val) {
        if (val.query.id) {
          const res = await getChoiceIdData(this.$route.query.id)
          this.queryData = res
          if (this.queryData.questionType === '1') {
            const { options } = res
            this.options = options
            this.ischecked()
          }

          if (this.queryData.questionType === '2') {
            const { options } = res
            this.options2 = options
            console.log('多选')
            this.ischeckedbox()
          }
        }
      }

    }
  },
  created() {
    this.getEnterpriseList()
    this.getSubjectList()
  },
  methods: {
    // 多选逻辑
    ischeckedbox() {
      this.options2.forEach(item => {
        if (item.isRight === 1) {
          this.checkList.push(item.code)
        }
      })
    },
    // 多选框选择改变时
    checkBoxFn() {
      this.checkList.forEach(item => {
        this.options2.forEach(val => {
          if (val.code === item) {
            console.log(val)
            val.isRight = 1
          }
        })
      })
    },
    // 切换题型选时
    optionsInit() {
      console.log(1)
    },
    // 添加选项按钮
    addCheckedInput() {
      this.options2.push(
        { code: 65 + this.options2.length, title: '', img: '', isRight: 0 }
      )
    },
    // 单选框选择改变时
    radioFn() {
      this.options.forEach(item => {
        item.isRight = 0
        if (item.code === this.checked) {
          item.isRight = 1
        }
      })
    },
    // 单选选择逻辑
    ischecked() {
      console.log(1)
      const res = this.options.find(item => item.isRight === 1)
      console.log(res)
      this.checked = res.code
    },
    // 获取学科
    async getSubjectList() {
      const res = await getSubjects()
      console.log(res)
      this.subjectList = res
    },
    // 获取企业
    async getEnterpriseList() {
      const { items } = await getEnterprise()
      this.enterpriseList = items
    },
    // 获取标签和二级目录
    async changeFn() {
      this.secondLevelDirectoryList = await getSecondLevelDirectory(this.queryData) // 二级目录
      this.tagList = await getTagList(this.queryData) // 标签
    },
    // 完成提交事件
    async btnOk() {
      await this.$refs.form.validate()
      await this.$confirm('确定提交吗？')
      if (this.queryData.questionType === '1') {
        this.queryData.options = this.options
      }
      if (this.queryData.questionType === '2') {
        this.queryData.options = this.options2
      }
      if (this.$route.query.id) {
        this.queryData = { ...this.queryData, 'id': Number(this.$route.query.id), 'tags': this.queryData.tags.toString() }
        await editTitle(this.queryData)
      } else {
        this.queryData = { ...this.queryData,
          'question': this.$refs.tg.content,
          'answer': this.$refs.dajx.content,
          'tags': this.queryData.tags.toString()
        }
        await addArticle(this.queryData)
      }
      this.$message.success('提交成功')
      this.$router.back()
    },
    getQuestion(val) {
      this.queryData.question = val
    },
    getAnswer(val) {
      this.queryData.answer = val
    }

  }
}
</script>

<style lang="scss" scoped>
.new{
  background: #fff;
  padding: 24px;
}
::v-deep .upimg {
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  .el-upload--picture-card{
    height: 40px;
    width: 88px;
    line-height: 40px;
  }
}
::v-deep .ipt{
    margin-left: 10px;
}
.radio {
  display: block;
  margin-bottom: 20px;
}
.checkbox{
   display: block;
  margin-bottom: 20px;
}
</style>>
